<template>
  <div class="app-container">
    <el-card>
      <el-form ref="searchForm" :rules="rules" :inline="true" :model="formSearch" class="demo-form-inline formHeight">
        <el-form-item prop="searchTxt" :label="type==='powerType'?'用电性质':'分类名称'">
          <el-input v-model="formSearch.searchTxt" size="mini" clearable placeholder="请输入关键词" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card mt20">
      <div slot="header" class="clearfix">
        <span>用电性质</span>
        <el-button type="primary" size="medium" style="float: right;" @click="handler('add')">新增</el-button>
      </div>
      <el-table :data="list" :fit="true" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column
          v-for="(item,index) in tableHead"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template slot-scope="scope">

            <template v-if="item.prop==='status_txt'">
              <el-tag :type="scope.row[item.prop]==='正常'?'success':'danger'">{{ scope.row[item.prop] }}</el-tag>
            </template>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-search" circle @click="handler('see',scope.row.id)" />
            <el-button type="primary" icon="el-icon-edit" circle @click="handler('edit',scope.row.id)" />
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteItem(scope.row,scope.$index)" />
          </template>
        </el-table-column>
      </el-table>

      <div class="paginationPage">
        <el-pagination
          background
          layout="total ,prev, pager, next"
          :total="pageTotal"
          :page-size="limit"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <commonDialog
      ref="commonDialog"
      :show-model="showModel"
      :module-type="moduleType"
      @fatherClose="closeDialog"
      @fatherEdit="editTable"
      @fatherAdd="addTable"
    />
  </div>
</template>

<script>
import commonMix from '@/mixin/commonMix.js'

export default {
  name: 'powerType',
  mixins: [commonMix],
  data() {
    return {
      type: 'powerType',
      tableData: [],
      formInline: {
        offset: 0,
        limit: 10
      },
      multipleSelection: [],
      // 正常1 禁用 0
      tableHead: [
        {
          label: '编号',
          prop: 'id'
        },
        {
          label: '创建时间',
          prop: 'created_at'
        },
        {
          label: '用电性质',
          prop: 'name'
        },
        {
          label: '状态',
          prop: 'status_txt'
        }
      ]
    }
  },
  mounted() {

  },
  methods: {

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.formInline.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.formInline.offset = val
      this.getList()
    }
  }
}
</script>

<style scoped>
.el-row {
  margin-top: 20px;
}

.mt20 {
  margin-top: 20px;
}
</style>
